<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标掠过 显示信息</title>
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <script src="../script/jquery-1.10.min.js"></script>
    <style>
        .h {
            margin: 10px;
        }

        .bord {
            border: 3px solid #cccccc;
        }

        .colkuang {
            margin: 5px;
            height: 50px;
            padding-top: 15px;
            width: 100px;
            background-color: black;
            color: white;
            border: 1px solid #cccccc;
            float: left;
            text-align: center;
        }

        .colinfo {

            border: 1px solid #cccccc;
            text-align: center;
            width: 330px;
            height: 100px;
            float: left;
            background: #8c8c8c;
        }

    </style>
    <script>
        window.onload = function () {
            // todo jquery
            var textareas = $("textarea")
            $(".label").each(function (i, e) {
                var d = $(e).text()
//                console.log("#"+d)
                $(e).mouseover(function () {
                    $("textarea").addClass("hidden") // todo 当前选项卡一直显示
//                    $(textareas[i]).addClass("hidden")
                    $(textareas[i]).removeClass("hidden") // 使用顺序 作为显示的 依据
                });
//                $(e).mouseout(function () {
//                    $("#"+d).addClass("hidden")
//                })
            });

            // todo col
            var m = new Map([['1月', 95], ['2月', 75], ['3月', 85], ['4月', 95], ['5月', 75], ['6月', 85], ['7月', 85], ['8月', 85], ['9月', 85]]);

            for (var key of m.keys()) { // 添加每个月的div
//                console.log(key)
                $("#col").append("<div class='text-center colkuang'>" + key + "</div>")
            }
            ;

            $(".text-center.colkuang:not(#info)").each(function (i, e) {  // 每个月的Div 添加鼠标事件
//                console.log($(e).text())
//                console.log(m.get($(e).text()))
                $(e).mouseover(function () {
                    var i = $(e).text();
                    $("#info").text(m.get(i))
                    $(e).css("font-weight", "bold")
                    $(e).css("color", "red")
                });
                $(e).mouseout(function () {
//                    var i = $(e).text();
//                    $("#info").text(m.get(i))
                    $(e).css("font-weight", "")
                    $(e).css("color", "")
                });
            })


        }

    </script>
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-sm-8">
            <label class="label label-danger bord">aa</label>
            <label class="label label-danger bord">bb</label>
            <label class="label label-danger bord">cc</label>
            <label class="label label-danger bord">dd</label>
            <br>
            <textarea class="text-center hidden">a</textarea>
            <textarea class="text-center hidden">b</textarea>
            <textarea class="text-center hidden">c</textarea>
            <textarea class="text-center hidden">d</textarea>
        </div>
    </div>
    <div class="row h">
        <div class="col-sm-8" style="width: 360px; background: #cccccc">

                <div id="col">
                </div>
                <div class="text-center colinfo " id="info"></div>

        </div>
    </div>

</div>


</body>
</html>